<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国共产党纪律检查委员会工作条例专题知识测试</title>
    <link href="./admin_lib/index.min.css" rel="stylesheet">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>

    <div id="app" v-cloak>
        <el-alert title="中国共产党纪律检查委员会工作条例专题知识测试" type="warning" :closable="false"></el-alert>
        <el-alert title="答题数据统计" type="warning" :closable="false"></el-alert>
        <el-form inline>
            <el-form-item label="总计答题次数：">{{q_total}} 次</el-form-item>
            <el-form-item label="总计答题人数：">{{r_total}} 人</el-form-item>
        </el-form>
        <el-table :data="list" size="medium" stripe>
            <el-table-column label="姓名" prop="name" min-width="80"></el-table-column>
            <el-table-column label="单位" prop="company" min-width="150"></el-table-column>
            <el-table-column label="电话" prop="phone" min-width="120">
                <template slot-scope="scope">
                    {{scope.row.phone|strProtect}}
                </template>
            </el-table-column>
            <el-table-column label="成绩" prop="score">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.score>=90" type="warning">{{scope.row.score}}</el-tag>
                    <el-tag v-else-if="scope.row.score>=70" type="success">{{scope.row.score}}</el-tag>
                    <el-tag v-else-if="scope.row.score>=60" type="">{{scope.row.score}}</el-tag>
                    <el-tag v-else type="info">{{scope.row.score}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="答题时间" prop="created_at" min-width="160"></el-table-column>
            <el-backtop></el-backtop>
        </el-table>
    </div>

    <script src="./admin_lib/vue.min.js"></script>
    <script src="./admin_lib/index.min.js"></script>
    <script src="./admin_lib/axios.min.js"></script>
    <script src="./admin_lib/lodash.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            filters: {
                strProtect: function (str, start, end) {
                    if (typeof str !== 'string' || str.length < 2) {
                        return str;
                    }
                    const _start = start || Math.floor(str.length / 3);
                    const _end = end || _start + 1;
                    const pat = new RegExp(`([\\s\\S]{${_start}})[\\s\\S]{${_end}}`);
                    return str.replace(pat, '$1' + '*'.repeat(_end));
                }
            },
            data: function () {
                return {
                    list: [],
                }
            },
            computed: {
                // 总计答题次数
                q_total: function () {
                    return this.list.length;
                },
                // 总计答题人数
                r_total: function () {
                    return _.uniqBy(this.list, function (val) {
                        return val.name;
                    }).length;
                },
            },
            created: function () {
                this.getList();
            },
            methods: {
                getList: function () {
                    var _that = this;
                    axios.get('miva_list.php').then(function (response) {
                        _that.list = response.data.list || [];
                    })
                },
            },
        })
    </script>
</body>

</html>